import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Avatar, Input } from 'antd';
import { connect } from 'umi';
import styles from './Welcome.less';
import imgAvatar from '../assets/avatar.png'

const { Search } = Input;
const { Meta } = Card;
const imgServ = "http://localhost:21021/Home/GetImageAsync?sysRowId=";
class ContractPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            userlist: [],
        }
    }
    componentDidMount() {
        this.fetchUsers();
    }
    fetchUsers = (keywords) => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: "CrudModel/getAll",
            payload: { SkipCount: 0, MaxResultCount: 9999 },
            control: 'User',
        }).then(() => {
            var resp = this.props.response.result;
            if (resp) {
                var userlist = resp.items;
                if(keywords)
                {
                    userlist = userlist.filter(o=>o.fullName.indexOf(keywords)>=0 || o.empID==keywords || o.fullName.indexOf(keywords)>=0);
                }
                this.setState({ loading: false, userlist });
            }
        });
    }
    deptCvt = (dptid) => {
        var obj = this.props.deptlist.filter(i => i.id == dptid)[0];
        if (obj)
            return obj.deptName;
        else
            return dptid
    }
    render() {
        return (
            <PageHeaderWrapper title={false}>
                <Search
                    placeholder="输入关键词查询用户"
                    enterButton="搜索"
                    size="large"
                    onSearch={value => this.fetchUsers(value)}
                    style={{marginBottom:12}}
                />
                <Card
                    loading={this.state.loading}>
                    {this.state.userlist.map((item) => (
                        <Card.Grid key={item.id}>
                            <Meta
                                avatar={<Avatar size="large" src={item.avater ? imgServ + item.avater : imgAvatar} />}
                                title={item.fullName + "，工号：" + item.empID}
                                description={item.emailAddress}
                            />
                            <div className={styles.ptxt}>电话：{item.telphone}，{this.deptCvt(item.deptID)}</div>
                        </Card.Grid>
                    ))}
                </Card>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ user, CrudModel, Department }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    deptlist: Department.deptlist,
}))(ContractPage);